<script setup>
import { reactive, ref ,watch,watchEffect} from 'vue'
let firstName = ref('')
let lastName = reactive({
    name: ""
})
let fullName = ref('')
// watch(firstName, (newVal, oldVal) => {
//     console.log(`姓氏${oldVal} -> ${newVal}`)
//     fullName.value = `${newVal}${lastName.name}`
// })
// watch(() => lastName.name, (newVal, oldVal) => { 
//     console.log(`名字${oldVal} -> ${newVal}`)
//     fullName.value = `${firstName.value}${newVal}`
// })

watchEffect(() => {
    fullName.value = `${firstName.value}${lastName.name}`
})
</script>

<template>
    <div>
        姓氏:<input type="text" v-model="firstName"></input><br>
        名字:<input type="text" v-model="lastName.name"></input><br></br>
        全名: {{ fullName }}
    </div>
</template>

<style scoped>

</style>
